<template>
  <div>
    <myDivider name="政府机关管理"></myDivider>
    <el-page-header @back="goBack" content="详情">
    </el-page-header>
    <div class="breadcrumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right" v-model="breadcrumbsData">
        <el-breadcrumb-item v-for="item in breadcrumbsData" :key="item.id" :label="item.name"> <a
            @click.prevent="tiktak(item.id)">{{ item.name }}</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="wholePage">

      <!-- 详情 -->
      <el-form ref="detailForm" :model="detailForm" label-width="100px" :rules="insertRules">

        <div style="display: flex;">
          <el-form-item label="名称:" prop="name">
            <el-input size="small" v-model="detailForm.name" autocomplete="off" style="width: 200px"
              disabled></el-input>
          </el-form-item>


          <el-form-item label="上级机关:">
            <el-select size="small" v-model="detailForm.fatherAgenciesData" filterable placeholder="请选择"
              style="width: 200px;" disabled @filter-method="getFatherAgenciesOptionData(name)">
              <el-option v-for="item in fatherAgenciesOptionData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="法定代表人:">
            <el-input size="small" v-model="detailForm.legalRepresentativeName" autocomplete="off" style="width: 200px"
              disabled></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码:" label-width="140px">
            <el-input size="small" v-model="detailForm.socialCreditCode" autocomplete="off" style="width: 200px"
              disabled></el-input>
          </el-form-item>
        </div>


        <div style="display: flex;">
          <el-form-item label="负责人:">
            <el-input size="small" v-model="detailForm.responsiblePersonName" autocomplete="off" style="width: 200px"
              disabled></el-input>
          </el-form-item>

          <el-form-item label="联系电话:">
            <el-input size="small" v-model="detailForm.telephoneNumber" autocomplete="off" style="width: 200px"
              disabled></el-input>
          </el-form-item>

          <el-form-item label="超级管理员:">
            <el-input size="small" v-model="detailForm.superAdministratorName" autocomplete="off" style="width: 200px"
              disabled></el-input>
          </el-form-item>

          <el-form-item label="绑定账号:" label-width="140px">
            <el-input size="small" v-model="detailForm.superAdministratorAccount" autocomplete="off"
              style="width: 200px" disabled></el-input>
          </el-form-item>
        </div>


        <div style="display: flex">
          <el-form-item label="组织类型:">
            <el-select size="small" v-model="detailForm.type" placeholder="请选择" style="width: 200px;" disabled>
              <el-option v-for="item in typeOptionData" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="发证机关:">
            <el-input size="small" v-model="detailForm.issuingAuthority" autocomplete="off" style="width: 200px"
              disabled></el-input>
          </el-form-item>

          <el-form-item label="颁发日期:">
            <el-date-picker size="small" type="date" v-model="detailForm.issueDate" style="width: 200px;" disabled
              placeholder="请选择">
            </el-date-picker>
          </el-form-item>
        </div>

        <div>

          <el-form-item label="地区:">
            <el-input size="small" v-model="detailForm.areaName" autocomplete="off" style="width: 300px"
              disabled></el-input>
          </el-form-item>
          <el-form-item label="详细地址:">
            <el-input size="small" v-model="detailForm.address" autocomplete="off" style="width: 200px"
              disabled></el-input>
          </el-form-item>
          <el-form-item label="有效期限:">
            <el-date-picker size="small" type="date" v-model="detailForm.effectiveStartDate"
              style="margin-left:2px;width: 200px;" disabled placeholder="开始时间">
            </el-date-picker>~
            <el-date-picker size="small" type="date" v-model="detailForm.effectiveEndDate"
              style="margin-left:2px;width: 200px;" disabled placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
        </div>

      </el-form>
      <!-- 详情结束 -->

      <!-- 分割线 -->
      <el-divider></el-divider>



      <!-- tab页 -->
      <el-tabs @tab-click="tabClick" type="border-card" :value="logOnUser.unitType == 'system' ? 'super' : 'XJJG'">

        <!-- 超级管理员 -->
        <el-tab-pane name="super" v-if="logOnUser.unitType == 'system'">
          <span slot="label"><i class="el-icon-office-building"></i> 超级管理员</span>

          <div>

            <div v-if="superAdminUserData.length > 0">
              <el-table :data="superAdminUserData" style="width: 100%" class="menuTable"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
                <el-table-column align="center" prop="account" label="用户账号">
                </el-table-column>
                <el-table-column align="center" prop="name" label="姓名">
                </el-table-column>


                <el-table-column align="center" prop="roleNames" label="角色">
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.roleNames" placement="top-start">
                      <span>{{ scope.row.roleNames == null ? '—' : scope.row.roleNames.length > 8 ?
                        "..." + scope.row.roleNames.substring(scope.row.roleNames.length - 8,
                          scope.row.roleNames.length) : scope.row.roleNames }}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>


                <el-table-column align="center" prop="status" label="创建时间">

                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                  </template>
                </el-table-column>

                <!-- <el-table-column label="操作" width="120px" align="center">

                  <template slot-scope="scope">

                    <div class="textBtn">
                      <el-row>
                        <el-col class="el" :span="12">
                          <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                            @click="bindingUserAccount(scope.row)">替换</span>
                        </el-col>
                        <el-col class="el" :span="12">
                          <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                            @click="unbindingUserAccount(scope.row)">解绑</span>
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                </el-table-column> -->
              </el-table>

            </div>
            <!-- <div v-else style="margin: 20px;cursor: pointer;" @click="addSuperAdmin">
              暂未绑定超级管理员，点击绑定
            </div> -->
            <div v-else style="margin: 20px;cursor: pointer;">
              暂未绑定超级管理员
            </div>


          </div>
          <!-- 绑定超级管理员结束 -->
        </el-tab-pane>





        <!-- 下级机关列表 -->
        <el-tab-pane name="XJJG">
          <span slot="label"><i class="el-icon-office-building"></i> 下级机关</span>
          <div>
            <div>
              <el-input class="findValue" v-model="agencyQuery.name" placeholder="根据机关名称查询"
                @keyup.enter.native="SouSuo2" clearable></el-input>
              <el-input style="width: 220px;" v-model="agencyQuery.responsiblePersonName" placeholder="根据负责人名称搜索"
                @keyup.enter.native="SouSuo2" clearable></el-input>
              <el-input class="findValue" v-model="agencyQuery.telephoneNumber" placeholder="根据手机号码搜索"
                @keyup.enter.native="SouSuo2" clearable></el-input>
              <el-button type="primary" style="margin-top: 20px; margin-left: 15px" @click="SouSuo2">查询</el-button>
              <el-button style="margin-top: 20px; margin-left: 15px" @click="reset2">重置</el-button>
            </div>

            <div>
              <el-table :data="agencyData" style="width: 100%" class="menuTable"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">


                <el-table-column align="center" prop="name" label="机关名称">
                </el-table-column>

                <el-table-column align="center" prop="responsiblePersonName" label="负责人">
                  <template slot-scope="scope">
                    <span>{{ scope.row.responsiblePersonName == null || scope.row.responsiblePersonName == '' ? '—' :
                      scope.row.responsiblePersonName }}</span>
                  </template>
                </el-table-column>

                <el-table-column align="center" prop="telephoneNumber" label="手机号码">

                  <template slot-scope="scope">
                    <span>{{ scope.row.telephoneNumber == null || scope.row.telephoneNumber == '' ? '—' :
                      scope.row.telephoneNumber }}</span>
                  </template>
                </el-table-column>


                <el-table-column align="center" prop="address" label="地区">

                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.address" placement="top-start">
                      <span>{{ scope.row.address == null || scope.row.address == '' ? '—' :
                        scope.row.address.length > 7 ?
                          "..." + scope.row.address.substring(scope.row.address.length - 7,
                            scope.row.address.length) : scope.row.address }}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>

                <el-table-column align="center" prop="createTime" label="创建时间">

                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime == null || scope.row.createTime == '' ? '—' :
                      scope.row.createTime.slice(0, 10) }}</span>
                  </template>
                </el-table-column>

                <el-table-column align="center" label="操作" width="150px" fixed="right">

                  <template slot-scope="scope">
                    <!-- <el-button type="primary" size="mini" @click="openDetailPage(scope.row)">详情</el-button> -->
                    <div class="textBtn">
                      <el-row>
                        <el-col class="el" :span="24">
                          <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                            @click="openDetailPage(scope.row)">详情</span>
                        </el-col>
                      </el-row>
                    </div>
                    <!-- <el-button type="primary" icon="el-icon-connection" size="mini"
                      @click="openBindingForm(scope.row)"></el-button>
                    <el-button type="primary" icon="el-icon-edit" size="mini"
                      @click="echoValueForUpdate(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                      @click="deleteAgencyById(scope.row)"></el-button> -->
                  </template>
                </el-table-column>
              </el-table>

            </div>


            <div class="pageFooterFather">
              <!-- <el-pagination background layout="prev, pager, next" :total="totalSize"
                @current-change="handleCurrentChange" class="pageFooter">
              </el-pagination> -->
              <myPagination :total="total2" :pageNum="pageNum2" @PageChange="PageChange2"
                @pageSizeChange="pageSizeChange2">
              </myPagination>
            </div>
          </div>
        </el-tab-pane>
        <!-- 下级机关列表结束 -->


        <!-- 员工列表 -->
        <el-tab-pane name="YGLB">
          <span slot="label"><i class="el-icon-s-custom"></i> 员工列表</span>
          <div>
            <el-input class="findValue" v-model="userQuery.userAccount" placeholder="根据用户账号搜索"
              @keyup.enter.native="SouSuo3" clearable></el-input>
            <el-input class="findValue" v-model="userQuery.userName" placeholder="根据用户姓名搜索"
              @keyup.enter.native="SouSuo3" clearable></el-input>
            <el-cascader change-on-select v-model="userQuery.userDept" :options="YGLBOptions" :props="YGLBProps"
              placeholder="请选择部门" clearable @change="SouSuo3"></el-cascader>

            <el-button type="primary" style="margin-top: 20px; margin-left: 15px" @click="SouSuo3">查询</el-button>
            <el-button style="margin-top: 20px; margin-left: 15px" @click="reset3">重置</el-button>
            <div class="operation" style="margin-top: 20px;margin-left: 15px;">
              <el-button type="primary" icon="el-icon-plus" @click="openInsertDialogForm">新增</el-button>
            </div>
          </div>

          <div>
            <el-table :data="userData" style="width: 100%" class="menuTable"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
              <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
              <el-table-column prop="account" align="center" label="用户账号">
              </el-table-column>
              <el-table-column prop="name" align="center" label="姓名">
              </el-table-column>

              <!-- <el-table-column prop="bindingPopulationPhoneNum" label="绑定手机号">
              </el-table-column> -->

              <el-table-column prop="departmentName" align="center" label="部门" width="200px">
              </el-table-column>
              <el-table-column prop="postName" align="center" label="岗位" width="200px">
              </el-table-column>
              <el-table-column prop="postName" align="center" label="是否主业" width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.isMainStaff == '1' ? '主业' : "兼职" }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="status" align="center" label="用户状态" width="80px">
                <template slot-scope="scope">
                  <div style="display: flex;align-items: center;justify-content: space-evenly">
                    <div style="width: 10px;height: 10px;border-radius: 100px;"
                      :style="{ backgroundColor: scope.row.status == '0' ? 'red' : '#409eff' }"></div>
                    <span>{{ scope.row.status == '0' ? '禁用' : "正常" }}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center" width="150px">

                <template slot-scope="scope">

                  <!-- <el-button type="primary" icon="el-icon-edit" size="mini"
                    @click="openEditDialogForm(scope.row)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" size="mini"
                    @click="deleteStaffById(scope.row)"></el-button> -->
                  <div class="textBtn">
                    <el-row>
                      <el-col class="el" :span="12">
                        <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                          @click="openEditDialogForm(scope.row)">修改</span>
                      </el-col>
                      <el-col class="el" :span="12">
                        <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                          @click="deleteStaffById(scope.row)">删除</span>
                      </el-col>

                    </el-row>
                  </div>

                </template>
              </el-table-column>
            </el-table>
          </div>
          <myPagination :total="total3" :pageNum="pageNum3" @PageChange="PageChange3" @pageSizeChange="pageSizeChange3">
          </myPagination>

        </el-tab-pane>
        <!-- 员工列表结束 -->


        <!-- 地图 -->
        <el-tab-pane name="map">
          <span slot="label"><i class="el-icon-location"></i> 详细位置</span>
          <div class="mapStyle">
            <div id="container"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- tab页结束 -->


      <!-- 新增员工弹框 -->
      <el-dialog :title="insertForm.confirmType === 'insert' ? '添加员工:' : '修改员工信息:'" :visible.sync="dialogFormVisible"
        class="formStyle" width="1000px">
        <el-form :model="insertForm" :rules="insertRules" ref="insertForm">

          <el-row>

            <el-col :span="9">
              <el-form-item label="选择部门:">
                <el-cascader v-model="insertUserQuery.agencyDepartmentId" :options="depmentManageData" filterable
                  :props="BMprops" clearable @change="departmentChangeEvent"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="选择岗位:">
                <div class="block">
                  <el-select v-model="insertUserQuery.agencyPostId" clearable filterable :disabled="agencyPostDisabled">
                    <el-option v-for="item in agencyPostListData" :key="item.id" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否设置为主业:">
                <el-switch v-model="mainSwitch" @change="switchChange" active-color="#66b1ff" inactive-color="#aaa">
                </el-switch>
              </el-form-item>

            </el-col>
          </el-row>


        </el-form>
        <el-divider></el-divider>
        <div>
          <el-input class="findValue" v-model="insertUserQuery.userAccount" placeholder="用户账号"
            @keyup.enter.native="queryInsertUserList" clearable></el-input>
          <el-input class="findValue" v-model="insertUserQuery.userName" placeholder="用户姓名"
            @keyup.enter.native="queryInsertUserList" clearable></el-input>
          <el-button type="primary" style="margin-top: 20px; margin-left: 15px" icon="el-icon-search"
            @click="queryInsertUserList">搜索</el-button>

        </div>
        <div class="abcd">
          <el-table :data="insertUserData" style="width: 100%; " class="menuTable" ref="addStaffTable"
            @selection-change="handleSelectionChange"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="account" label="用户账号">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>

            <el-table-column prop="bindingPopulationPhoneNum" label="绑定手机号">
            </el-table-column>

            <!-- <el-table-column prop="departmentName" label="部门">

              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.departmentName" placement="top-start">
                  <span>{{ scope.row.departmentName == null ? '—' : scope.row.departmentName.length > 8 ?
      "..." + scope.row.departmentName.substring(scope.row.departmentName.length - 8,
        scope.row.departmentName.length) : scope.row.departmentName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="roleNames" label="岗位">

              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.roleNames" placement="top-start">
                  <span>{{ scope.row.roleNames == null ? '—' : scope.row.roleNames.length > 8 ?
      "..." + scope.row.roleNames.substring(scope.row.roleNames.length - 8,
        scope.row.roleNames.length) : scope.row.roleNames }}</span>
                </el-tooltip>
              </template>
            </el-table-column> -->
            <el-table-column prop="status" label="状态">

              <template slot-scope="scope">
                <span>{{ scope.row.status == '0' ? '禁用' : "正常" }}</span>
              </template>
            </el-table-column>


          </el-table>

        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button v-if="insertForm.confirmType == 'insert'" type="primary" @click="addStaff()">确
            定</el-button>
          <el-button v-if="insertForm.confirmType == 'update'" type="primary" @click="updateStaff()">确
            定</el-button>

        </div>
      </el-dialog>
      <!-- 新增员工弹框结束 -->

      <!-- 修改员工岗位弹窗 -->
      <el-dialog title="修改岗位" :visible.sync="xzgwdialogFormVisible" class="xzgwformStyle" width="850px">
        <el-form :model="UserPostData" :rules="UserPostRules" ref="xzgwForm">
          <el-row>
            <el-col :span="9">
              <el-form-item label="选择部门:" label-width="100px" prop="department">
                <el-cascader style="width: 150px;" v-model="UserPostData.department" :options="depmentManageData"
                  filterable :props="BMprops" clearable @change="UserPostDepartmentChange"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="选择岗位:" label-width="100px" prop="post">
                <div class="block">
                  <el-select :disabled="!UserPostData.department" style="width: 150px;" v-model="UserPostData.post"
                    clearable filterable>
                    <el-option v-for="item in agencyPostListData" :key="item.id" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否设置为主业:">
                <el-switch v-model="mainSwitch" active-color="#66b1ff" inactive-color="#aaa" @change="switchChange">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <div style="display: flex;justify-content: flex-end;">
              <el-button type="info" @click="xzgwdialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="updateUserPost">修改</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 选择超级管理员弹窗 -->
      <!-- <el-dialog :close-on-click-modal="false" class="dialogStyle" title="选择用户" :visible.sync="selectShow"
        width="600px">
        <el-divider></el-divider>
        <div style="padding: 0 20px;box-sizing: border-box">

          <div>
            <el-input clearable style="width: 180px;" v-model="popKey1" placeholder="根据用户账号查询"></el-input>
            <el-input clearable style="width: 150px;" v-model="popKey2" placeholder="根据姓名查询"></el-input>
            <el-button type="primary" @click="selectSouSuo">查询</el-button>
          </div>
          <div class="popTableStyle">
            <el-table ref="selectUnitPopTable" @current-change="selectChange" :data="selectData" style="width: 100%"
              height="250px" highlight-current-row>
              <el-table-column align="center" prop="account" label="用户账号">
              </el-table-column>
              <el-table-column align="center" prop="name" label="姓名">
              </el-table-column>
              <el-table-column align="center" prop="name" label="用户类型">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-divider></el-divider>
        <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
          <el-button @click="selectShow = false">取 消</el-button>
          <el-button type="primary" @click="selectOk">确
            定</el-button>
        </div>
      </el-dialog> -->
    </div>
  </div>
</template>





<script>
import {
  getFatherAgencies,
  getDictionaryList,
  getAgencyDetail,
  // bindingAU,
  // unbindingAU,
  getAgencySubList,
  getDepartmentHierarchically,
  getPostListByDepId,
  addStaff,
  getUserMainStaff,
  getAddedUserList,
  deleteStaff,
  getBreadcrumbs,
  getAgencyStaffDetail,
  updateStaff,
  getUserList,
  mygetaddUserPost,
  myupdateUserPost,
  mydeleteUserPost,
  mygetUserListForBindingAU,
  myGetSuperDetail
} from "./agency";



import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data() {
    return {
      // 选择超级管理员弹窗==============================
      selectShow: false,
      popKey1: '',
      popKey2: '',
      selectData: [],
      superAdminId: 0,
      superCache: {},
      //================================选择超级管理员弹窗
      pageNum1: 1,
      pageSize1: 10,
      total1: 0,
      pageNum2: 1,
      pageSize2: 10,
      total2: 0,
      pageNum3: 1,
      pageSize3: 10,
      total3: 0,
      logOnUser: {},//登录用户信息
      activePost: {},//当前选中的某条岗位信息
      UserPostRules: {
        department: [
          { required: true, message: '请选择部门', trigger: 'change' },
        ],
        post: [
          { required: true, message: '请选择岗位', trigger: 'change' },
        ]
      },
      UserPostData: {},
      xzgwdialogFormVisible: false,
      activeUser: null,//点击机构下的员工列表修改时，获取该员工的id
      gwdialogFormVisible: false,
      gwTableData: [],
      mainSwitch: true,//是否设置为主业
      BMprops: {
        checkStrictly: true,
        value: 'id',
        label: 'name',
      },

      //地图相关参数 START
      Marker: null,
      map: null,
      //地图相关参数 END
      updateStaffId: 0,
      dialogFormVisible: false, //控制弹框开关
      detailForm: {
        // 新增弹框参数
        name: "",
        fatherAgenciesData: "",
        legalRepresentativeName: "",
        telephoneNumber: "",
        socialCreditCode: "",
        type: "",
        issuingAuthority: "",
        address: "",
        areaName: '',
        issueDate: "",
        effectiveStartDate: "",
        effectiveEndDate: "",
        superAdministratorName: "无",
        superAdministratorAccount: "无",
        agencyPid: "",
      },
      insertRules: {
        phoneNumber: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "设备名称不能为空",
            trigger: "blur",
          },
        ],
      },
      operateType: 'insert',
      genderListData: [
        { id: '0', name: "女" }, { id: '1', name: "男" }
      ],
      fatherAgenciesOptionData: [],
      typeOptionData: [],
      agencyQuery: {
      },

      userQuery: {
        userAccount: "",
        userName: ""
      },
      YGLBOptions: [],
      YGLBProps: {
        value: 'id',
        label: 'name',
      },
      insertUserQuery: {
        userAccount: "",
        userName: "",
        agencyDepartmentId: "",
        agencyPostId: "",
      },
      insertForm: {
        confirmType: 'insert',
      },
      breadcrumbsData: [], //面包屑数据
      agencyData: [], //下级机关数据
      userData: [], //已新增员工数据
      superAdminUserData: [], //待添加超级管理员的用户列表
      insertUserData: [], //待新增员工数据
      depmentManageData: [], //部门数据
      agencyPostListData: [], //岗位数据
      agencyPostDisabled: true, //岗位下拉框
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      totalSize: 0,
      agencyDetailObj: {},
    }
  },

  activated() {

    this.$set(this.userQuery, 'userName', '')
    this.$set(this.userQuery, 'userAccount', '')
    this.$set(this.userQuery, 'userDept', [])
    this.$set(this.agencyQuery, 'name', '')
    this.$set(this.agencyQuery, 'responsiblePersonName', '')
    this.$set(this.agencyQuery, 'telephoneNumber', '')

    this.getAgencyTypeOptionData();
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    this.getDepartmentHierarchically();
    this.getAgencyInfo(this.$route.query.id);
    this.operateType = 'binding'
    this.getAgencyList();

    this.queryAddedStaffList();
    //刚进入页面加载
    this.getFatherAgenciesOptionData("");
    this.getBreadcrumbsData();


  },

  methods: {
    switchChange(e) {
      if(!e){
        this.$confirm('添加后本单位用户为兼职，无法进行公告资讯发布，审批等操作', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        
        }).catch(() => {
          this.mainSwitch = !this.mainSwitch 
        });
      }else{
        
      }
    },
    addSuperAdmin() {
      this.selectShow = true
      this.popKey1 = ''
      this.popKey2 = ''
      this.superCache = {}
      this.superAdminId = 0
      this.getReplaceSuperData()
    },
    // 超级管理员弹窗==============================
    selectChange(val) {

      this.superCache = val
    },
    // async selectOk() {
    //   function isEmptyObject(obj) {
    //     return Object.keys(obj).length === 0 && obj.constructor === Object;
    //   }
    //   if (!this.superCache || isEmptyObject(this.superCache)) {
    //     this.selectShow = false
    //     return
    //   }
    //   this.$confirm('是否确认绑定?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     // 处理超级管理员解绑
    //     var userId = this.superCache.id;
    //     var agencyId = this.$route.query.id;
    //     bindingAU(agencyId, userId).then((res) => {
    //       if (res.code == 200) {
    //         this.$message({
    //           message: '绑定成功',
    //           type: 'success'
    //         });
    //         this.getAgencyInfo(this.$route.query.id);
    //         this.selectShow = false
    //       } else {
    //         this.$message({
    //           message: res.message,
    //           type: "warning",
    //         });
    //       }
    //     });
    //   }).catch(() => {

    //   });

    // },
    selectSouSuo() {
      this.getReplaceSuperData()
    },
    // ====================================超级管理员弹窗

    PageChange2(e) {
      this.pageNum2 = e
      this.getAgencyList()
    },
    pageSizeChange2(e) {
      this.pageNum2 = 1
      this.pageSize2 = e
      this.getAgencyList()
    },
    tabClick() { //tab页切换事件
    },
    handleCurrentChange(e) {
      this.pageNum = e
      this.queryInsertUserList()
    },

    // 定位详细坐标
    positioning(val) {

      // 设置中心点
      this.map.setCenter([val.lon, val.lat])

      // 设置高度
      this.map.setZoom([15])

      // 如果之前添加个散点那么就去除
      if (this.Marker != null) {
        this.Marker.remove()
        console.log('删除marker', this.Marker);
      }

      // 添加散点
      this.Marker = new AMap.Marker({
        position: new AMap.LngLat(val.lon, val.lat),
        title: val.title,
        anchor: 'bottom-center',
      })
      this.map.add(this.Marker);
    },
    ShowMap(val) {
      let that = this
      this.$nextTick(() => {
        // 如果地图为空 则初始化地图
        if (this.map == null) {
          AMapLoader.load({
            key: "b59ffa4664995330f554d4aedc02b03c", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          })
            .then((AMap) => {
              that.map = new AMap.Map("container", {
                // 设置地图容器id
                // viewMode: "3D", // 是否为3D地图模式
                // zoom: 11, // 初始化地图级别
                // center: [116.397428, 39.90923], // 初始化地图中心点位置
              });
              that.positioning(val)
            })
            .catch((e) => {
              console.log(e);
            });
        } else {
          this.positioning(val)
        }
      })
    },


    /**
     *  上一页
     */
    goBack() {
      this.$router.push({ path: '/agency/management' });
    },

    /**
     * 获取上级机关列表
     */
    getFatherAgenciesOptionData(name) {
      getFatherAgencies(name).then((res) => {
        this.fatherAgenciesOptionData = res.data;
      })
    },


    /**
     * 获取类型字典数据
     */
    getAgencyTypeOptionData() {
      getDictionaryList("agency_type").then((res) => {
        this.typeOptionData = res.data;
      })
    },




    getAgencyInfo(id) {
      getAgencyDetail(id).then((res) => {
        this.agencyDetailObj = res
        this.queryInsertUserList();
        console.log(res, '详细信息');
        this.querysuperAdminUserList(res.superAdministratorId);
        this.detailForm.name = res.name;
        this.detailForm.areaName = res.areaName;
        this.detailForm.fatherAgenciesData = res.pid == 0 ? "" : res.pid;
        this.detailForm.legalRepresentativeName = res.legalRepresentativeName;
        this.detailForm.telephoneNumber = res.telephoneNumber;
        this.detailForm.socialCreditCode = res.socialCreditCode;
        this.detailForm.type = res.type;
        this.detailForm.issuingAuthority = res.issuingAuthority;
        this.detailForm.address = res.address;
        this.detailForm.issueDate = res.issueDate;
        this.detailForm.effectiveStartDate = res.effectiveStartDate;
        this.detailForm.effectiveEndDate = res.effectiveEndDate;
        this.detailForm.superAdministratorName = res.superAdministratorName == null ? "无" : res.superAdministratorName;
        this.detailForm.superAdministratorAccount = res.superAdministratorAccount == null ? "无" : res.superAdministratorAccount;
        this.detailForm.criLng = res.criLng;
        this.detailForm.criLat = res.criLat
        this.detailForm.responsiblePersonName = res.responsiblePersonName
        // let req = {
        //   lon: this.detailForm.criLng,
        //   lat: this.detailForm.criLat,
        //   title: this.detailForm.name
        // }
        let req = {
          lon: this.detailForm.criLng,
          lat: this.detailForm.criLat,
          title: this.detailForm.name
        }
        console.log(req, '地图信息');
        if (req.lat) {
          this.ShowMap(req)
        }

      })
    },


    getReplaceSuperData() {
      getUserList(
        {
          "unitType": "system", //必传 机关：agency  机构：company 
          "unitId": 0, //单位id
          "unitName": '',
          "account": this.popKey1, //账号
          "name": this.popKey2, //名字
          "status": 1,
          "pageNum": 1,
          "pageSize": 10000,
        }
      ).then((res) => {
        let arr = []
        res.list.forEach(el => {
          if (el.unitType == 'system' || el.unitType == 'agency') {
            arr.push(el)
          }
        })
        this.selectData = arr
        this.selectData.forEach((el, i) => {
          if (el.id == this.superAdminId) {
            this.$nextTick(() => {
              this.$refs.selectUnitPopTable.setCurrentRow(this.selectData[i])
            })
          }
        })
      });
      // getAddedUserList(
      //   this.$route.query.id,
      //   this.popKey1,
      //   this.popKey2,
      //   1,
      //   100000
      // ).then((res) => {
      //   console.log(res, '弹窗已添加员工列表');
      //   if (res.code == 200) {
      //     this.selectData = res.data.list;
      //     this.selectData.forEach((el, i) => {
      //       if (el.id == this.superAdminId) {
      //         this.$nextTick(() => {
      //           this.$refs.selectUnitPopTable.setCurrentRow(this.selectData[i])
      //         })
      //       }
      //     })
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // });
    },
    bindingUserAccount(row) {
      this.selectShow = true
      this.popKey1 = ''
      this.popKey2 = ''
      this.superCache = {}
      this.superAdminId = row.id
      this.getReplaceSuperData()

    },
    // unbindingUserAccount(row) {
    //   this.$confirm('是否解除绑定?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     var userId = row.id;
    //     var agencyId = this.$route.query.id;
    //     unbindingAU(agencyId, userId).then((res) => {
    //       if (res.code == 200) {
    //         this.$message({
    //           message: '解绑成功',
    //           type: 'success'
    //         });
    //         this.getAgencyInfo(this.$route.query.id)

    //       } else {
    //         this.$message({
    //           message: res.message,
    //           type: "warning",
    //         });
    //       }
    //     });
    //   }).catch(() => {

    //   });

    // },
    SouSuo2() {
      this.pageNum2 = 1
      this.getAgencyList()
    },
    reset2() {
      this.$set(this.agencyQuery, 'name', '')
      this.$set(this.agencyQuery, 'responsiblePersonName', '')
      this.$set(this.agencyQuery, 'telephoneNumber', '')
      this.pageNum2 = 1
      this.getAgencyList()
    },
    //按条件查询菜单列表
    getAgencyList() {
      // responsiblePersonName  telephoneNumber
      getAgencySubList({
        "name": this.agencyQuery.name,
        "responsiblePersonName": this.agencyQuery.responsiblePersonName,
        "telephoneNumber": this.agencyQuery.telephoneNumber,
        "pid": this.$route.query.id,
        "pageNum": this.pageNum2,
        "pageSize": this.pageSize2
      }).then((res) => {
        this.agencyData = res.list;
        this.total2 = res.total;
      });

    },
    //打开账号绑定窗口 并回显账号信息
    openDetailPage(row) {
      var id = row.id;
      this.$router.replace({
        path: '/agency/agencyDetail',
        query: { id: id }
      }, () => {
        location.reload();//刷新页面
      })

    },
    //打开添加员工弹框
    openInsertDialogForm() {
      this.agencyPostListData = []
      this.mainSwitch = true
      this.dialogFormVisible = true
      this.insertForm.confirmType = 'insert';
      //查询待添加的用户列表
      this.queryInsertUserList();

      this.insertUserQuery.agencyDepartmentId = "";
      this.insertUserQuery.agencyPostId = "";
    },
    //打开员工修改弹框
    async openEditDialogForm(row) {
      // 2024/03/06之前版本
      // this.updateStaffId = row.id;
      // this.dialogFormVisible = true
      // this.insertForm.confirmType = 'update';
      // //查询待修改的用户列表
      // this.getDepartmentHierarchically();
      // this.getAgencyStaffDetail(this.updateStaffId);
      // this.getPostListByDepId();
      // this.insertUserQuery.agencyDepartmentId = "";
      // this.insertUserQuery.agencyPostId = "";

      //2024/03/06最新版本
      this.activeUser = row
      if (row.isMainStaff == 1) {
        this.mainSwitch = true
      }
      if (row.isMainStaff == 0) {
        this.mainSwitch = false
      }
      let res = await getAgencyStaffDetail(row.staffId)
      this.$set(this.UserPostData, 'department', res.data[0].deptId)
      getPostListByDepId(
        res.data[0].deptId
      ).then((res) => {
        this.agencyPostListData = res.data;
      });
      this.$set(this.UserPostData, 'post', res.data[0].postId)
      this.xzgwdialogFormVisible = true
    },

    updateUserPost() { //新增岗位确认按钮
      this.$refs['xzgwForm'].validate(async (valid) => {
        if (valid) {
          this.$confirm('是否提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            let res3 = await myupdateUserPost({
              "id": this.activeUser.staffId, //员工id
              "postId": this.UserPostData.post, //修改后的岗位id
              "mainStaff": this.mainSwitch
            })
            if (res3.code == 200) {
              this.$message({
                message: '岗位修改成功',
                type: 'success'
              });
              this.xzgwdialogFormVisible = false
              this.queryAddedStaffList()
            } else {
              this.$message.error(res3.message);
            }

          }).catch(() => {

          });


        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    SouSuo3() {
      this.pageNum3 = 1
      this.queryAddedStaffList()
    },
    reset3() {
      this.$set(this.userQuery, 'userAccount', '')
      this.$set(this.userQuery, 'userName', '')
      this.$set(this.userQuery, 'userDept', [])
      this.pageNum3 = 1
      this.queryAddedStaffList()
    },
    PageChange3(e) {
      this.pageNum3 = e
      this.queryAddedStaffList()
    },
    pageSizeChange3(e) {
      this.pageNum3 = 1
      this.pageSize3 = e
      this.queryAddedStaffList()
    },
    //按条件查询账号列表
    queryAddedStaffList() {
      if (this.userQuery.userDept.length == 0) {
        this.userQuery.userDept = ['']
      }
      getAddedUserList({
        depId: this.userQuery.userDept[this.userQuery.userDept.length - 1],
        agencyId: this.$route.query.id,
        account: this.userQuery.userAccount,
        name: this.userQuery.userName,
        pageNum: this.pageNum3,
        pageSize: this.pageSize3
      }).then((res) => {
        console.log(res, '已添加员工列表');
        if (res.code == 200) {
          this.userData = res.data.list;
          this.total3 = res.data.total;
        } else {
          this.$message.error(res.message)
        }

      });
    },

    //按条件查询账号列表
    querysuperAdminUserList(userId) { //超级管理员
      // userId = 25
      if (userId == 0 || !userId) {
        this.superAdminUserData = []
        return
      }

      myGetSuperDetail(userId).then((res) => {
        if (res.code == 200) {
          let { account, name, createTime, id, roleNames } = res.data
          this.superAdminUserData = []
          this.superAdminUserData.push({
            account, name, createTime, id, roleNames
          })
        } else {
          this.$message.error(res.message)
        }
      });
      // var status = '1';
      // mygetUserListForBindingAU({
      //   // "unitType": "system", //必传 机关：agency  机构：company 
      //   // "unitId": 0, //单位id
      //   "name": this.superAdminQuery.userName, //名字
      //   "account": this.superAdminQuery.userAccount, //账号
      //   // "status": status,
      //   "pageNum": this.pageNum1,
      //   "pageSize": this.pageSize1,
      // }
      // ).then((res) => {
      //   if (res.code == 200) {
      //     this.superAdminUserData = res.data.list;
      //     this.total1 = res.data.total;
      //   } else {
      //     this.$message.error(res.message)
      //   }

      // });
    },
    //按条件查询账号列表
    queryInsertUserList() {
      var status = '1';
      getUserList(
        {
          "unitType": "agency", //必传 机关：agency  机构：company 
          "unitId": this.$route.query.id, //单位id
          "name": this.insertUserQuery.userName, //名字
          "account": this.insertUserQuery.userAccount, //账号
          "unitName": this.agencyDetailObj.name,
          "status": status,
          "pageNum": this.pageNum,
          "pageSize": this.pageSize,
        }
        // this.insertUserQuery.userAccount,
        // this.insertUserQuery.userName,
        // status,
        // this.pageNum,
        // this.pageSize
      ).then((res) => {
        console.log(res, 'wqdqwdq');
        this.insertUserData = res.list;

        this.pageNum = res.pageNum;
        this.pageSize = res.pageSize;
        this.totalSize = res.total;
      });
    },
    //查询部门
    getDepartmentHierarchically() {
      var agencyId = this.$route.query.id;
      getDepartmentHierarchically(
        agencyId,
      ).then((res) => {
        function processNestedArray(data) { //如果children长度为0，则设置为undefined
          // 遍历数组中的每个对象  
          data.forEach(item => {
            // 如果当前对象的children数组长度为0，则将其设置为undefined  
            if (item.children && item.children.length === 0) {
              item.children = undefined;
            }
            // 如果当前对象还有子对象（即children数组不为空），则递归处理子对象  
            if (item.children) {
              processNestedArray(item.children);
            }
          });
          return data;
        }
        this.depmentManageData = processNestedArray(res.data);
        this.YGLBOptions = processNestedArray(res.data);
      });
    },
    UserPostDepartmentChange() { //用户岗位列表的查询岗位
      this.$set(this.UserPostData, 'post', '')
      getPostListByDepId(
        this.UserPostData.department[this.UserPostData.department.length - 1],
      ).then((res) => {
        this.agencyPostListData = res.data;
      });
    },
    //查询岗位
    getPostListByDepId() {
      getPostListByDepId(
        this.insertUserQuery.agencyDepartmentId[this.insertUserQuery.agencyDepartmentId.length - 1],
      ).then((res) => {
        this.agencyPostListData = res.data;
      });
    },
    //部门选择变动事件
    departmentChangeEvent() {
      if (this.insertUserQuery.agencyDepartmentId.length > 0) {
        this.agencyPostDisabled = false;
      } else {
        this.agencyPostDisabled = true;
      }

      this.getPostListByDepId();


    },
    handleSelectionChange(val) { //单选事件
      if (val.length == 0) return
      if (val.length > 1) {
        this.$refs.addStaffTable.clearSelection(); //取消所有选中
        this.$refs.addStaffTable.toggleRowSelection(val[val.length - 1], true);
      }
      this.multipleSelection = [val[val.length - 1]]
    },

    //添加员工
    async addStaff() {
      var agencyId = this.$route.query.id;
      var depIds = this.insertUserQuery.agencyDepartmentId;
      var postIds = this.insertUserQuery.agencyPostId;

      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请先选择至少一个账号进行绑定',
          type: "warning",
        });
        return;
      }
      if (depIds == "") {
        this.$message({
          message: '请选择部门',
          type: "warning",
        });
        return;
      }
      if (postIds == "") {
        this.$message({
          message: '请选择岗位',
          type: "warning",
        });
        return;
      }


      // var tempUserId = "";
      // if (this.multipleSelection) {
      //   this.multipleSelection.forEach(row => {
      //     tempUserId = tempUserId + "," + row.id
      //   });
      //   var userId = tempUserId.substring(1)
      // }
      if (this.mainSwitch) {  //如果勾选设置为主业的话
        let res = await getUserMainStaff(this.multipleSelection[0].id)//先判断该用户有没有主业

        if (res.data != 0) { //有主业
          this.$confirm('当前员工已有主业，是否修改?', '提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确认修改',
            cancelButtonText: '设为兼职',
            type: 'warning'
          }).then(() => {
            this.adddddddStaff(true)
          }).catch((action) => {
            if (action === 'cancel') {
              console.log('点击了兼职')
              this.adddddddStaff(false)
              return
            }
            if (action === 'close') {
              console.log('点击了关闭')
              return
            }
          });
        } else {
          this.adddddddStaff(true)
        }
      } else {//如果不勾选设置为主业的话
        this.adddddddStaff(false)
      }
    },
    adddddddStaff(mainStaff) {
      addStaff({
        "agencyId": this.$route.query.id,
        "userId": this.multipleSelection[0].id, //用户id  必填
        "postId": this.insertUserQuery.agencyPostId, //岗位id  必填
        "mainStaff": mainStaff //是否设置为主岗位，true是
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: '添加员工成功',
            type: 'success'
          });
          this.dialogFormVisible = false
          this.queryAddedStaffList();
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //删除员工
    deleteStaffById(row) {

      this.$confirm("确认删除该员工吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteStaff(row.staffId, row.id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.queryAddedStaffList();
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });

      }).catch(() => {

        return;
      });

    },

    //查询面包屑数据
    getBreadcrumbsData() {
      var agencyId = this.$route.query.id;

      getBreadcrumbs(agencyId).then((res) => {
        this.breadcrumbsData = []
        res.forEach(el => {
          if (el) {
            this.breadcrumbsData.push(el)
          }
        })


      });

    },

    tiktak(id) {
      this.$router.replace({
        path: '/agency/agencyDetail',
        query: { id: id }
      }, () => {
        location.reload();//刷新页面
      })

    },
    // 好像没用着
    getAgencyStaffDetail(staffId) {
      getAgencyStaffDetail(staffId).then((res) => {
        if (res.code == 200) {
          var agencyStaff = res.data;
          this.insertUserQuery.agencyDepartmentId = eval('([' + agencyStaff.departmentIds + '])');
          this.insertUserQuery.agencyPostId = eval('([' + agencyStaff.postIds + '])');
          var selection = eval('([' + agencyStaff.userId + '])');
          this.getPostListByDepId();
          this.agencyPostDisabled = false;
          this.insertUserData.forEach((item) => {
            selection.forEach((staff) => {
              if (item.id == staff) {
                this.$nextTick(() => {
                  //设置当前用户高亮
                  this.$refs.addStaffTable.clearSelection();
                  this.$refs.addStaffTable.toggleRowSelection(item, true);
                })
              }
            })
          });


        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });

    },

    updateStaff() {
      var agencyId = this.$route.query.id;
      var depIds = this.insertUserQuery.agencyDepartmentId;
      var postIds = this.insertUserQuery.agencyPostId;

      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请先选择至少一个账号进行绑定',
          type: "warning",
        });
        return;
      }
      if (depIds == "") {
        this.$message({
          message: '请选择部门',
          type: "warning",
        });
        return;
      }
      if (postIds == "") {
        this.$message({
          message: '请选择岗位',
          type: "warning",
        });
        return;
      }


      var tempUserId = "";
      if (this.multipleSelection) {


        if (this.multipleSelection.length > 1) {
          this.$message({
            message: '只能选一个账号进行修改',
            type: "warning",
          });
          return;
        }


        this.multipleSelection.forEach(row => {
          tempUserId = tempUserId + "," + row.id
        });
        var userId = tempUserId.substring(1)



        updateStaff(this.updateStaffId, agencyId, userId, depIds, postIds).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            this.$nextTick(() => {
              this.queryAddedStaffList();
            })

          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });
      }
    },



  }
};
</script>

<style lang="less" scoped>
.abcd {
  /deep/ .el-table__header-wrapper {
    .el-table-column--selection {
      .cell {
        display: none;
      }
    }
  }
}

.popTableStyle {
  margin-top: 20px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #efefef;
      }
    }

    .el-table__body tr.current-row>td.el-table__cell {
      background-color: #409eff;

      .cell {
        color: white;
        font-weight: 600;
      }
    }
  }
}

.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }

    .el-dialog__footer {
      padding: 0;
    }
  }
}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}

.mapStyle {
  height: 350px;
  width: 100%;

  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
  }
}

.wholePage {
  margin: 20px 0;

  /deep/ .el-form-item {
    margin: 0;
  }
}

.breadcrumbs {
  margin-top: 20px;
  margin-left: 13px;
  height: 50%;
}

.menuTable {
  margin-top: 40px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}



.formStyle {
  width: 1780px;
  margin: 20px auto;
}



.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}
</style>